<template>
    <div style="width: 100%;">
        <div class="list_box" style="cursor: pointer;">
            <img :src="list.avatar" alt="" @click="goPage1('/association/youping', list.user_id)">
            <div class="list_t">
                <div class="text">
                    <div :class="{ line2: !show }" :style="{ color: videoType ? '#fff' : '' }" ref="textContainer">
                        <span>{{ list.content }}</span>
                        <span :style="{ color: videoType ? '#fff' : '', background: videoType ? '#000' : '' }"
                            v-if="!show && line > 1 && list.content.length > 65" class="indent-part">
                            ...
                            <span @click="open(list.id)" style="color: #CC0000">展开</span>
                        </span>
                        <span :style="{ color: videoType ? '#fff' : '', background: videoType ? '#000' : '' }"
                            v-if="show && list.content.length > 65" class="indent-part">
                            <span @click="show = false" style="color: #CC0000">折叠↑</span>
                        </span>
                    </div>
                </div>
                <div class="nameLook">
                    <div style="width: 100%;justify-content: space-between;margin-left: 5px;">
                        <div style="display: flex;align-items: center;">
                            <p @click="toSearch(list.source)" v-if="list.source" class="line1"><span>{{ list.source
                            }}</span></p>
                            <p @click="toSearch(list.author)" v-if="list.author" class="line1">

                                《<span>{{
                                    list.author }}</span>
                                》
                            </p>
                        </div>

                        <p class="line1" @click="goPage(list.from_id, list.op)">
                            摘自<span>{{ list.from_name }}</span>
                        </p>
                    </div>
                    <!-- <div>
                        <div class="look">
                            <img src="@/assets/img/eye.png" alt="">
                            <span>{{ list.views }}</span>
                        </div>
                        <div class="like" @click="likeExp(list.id)">
                            <i class="iconfont" :style="{ color: list.is_like == 1 ? 'red' : '' }">&#xe640;</i>
                            <span>{{ list.likes }}</span>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import img from "@/assets/img/t1.png"

export default {
    name: "l-excerpt",
    data() {
        return {
            list2: [],
            show: false,
            line: 0
        };
    },
    watch: {

    },
    props: {
        list: {
            type: Object,
            default: () => {
                return {}
            },
        },
        maxWidth: {
            type: Number,
            default: 200
        },
        border: {
            type: Boolean,
            default: true
        },
        set: {
            type: Boolean,
            default: true
        },
        videoType: {
            type: Boolean,
            default: false,
        },
    },
    mounted() {
        this.calculateLines();
    },
    methods: {

        toSearch(keyword) {
            this.$router.push({
                path: '/searchAll',
                query: {
                    keyword: keyword
                }
            })
        },
        goPage1(url, id) {

            const route = this.$router.resolve({
                path: url,
                query: { id }
            });
            window.open(route.href, '_blank')

        },
        goPage(id, op) {

            if (op == 2) {
                console.log(122131)
                const route = this.$router.resolve({
                    path: '/articleRead',
                    query: { aid: id }
                });
                window.open(route.href, '_blank');


            } else {
                const route = this.$router.resolve({
                    path: '/columnIndex',
                    query: { id }
                });
                window.open(route.href, '_blank');

            }

        },
        open(id) {
            this.showCol(id)
            this.show = true
        },

        showCol(id) {
            let params = {
                id
            }
            this.$api.showCol(params).then(res => {
                if (res.data.code == 1) {
                    this.getList(id, 1)
                }
            })
        },

        // 点赞摘抄
        likeExp(id) {
            let params = {
                id
            }
            this.$api.likeExp(params).then(res => {
                if (res.data.code == 1) {
                    let status = res.data.data
                    this.getList(id, 2, status)
                }
            })
        },



        getList(id, op, status = 1) {
            this.$emit('reList', { id, op, status })
        },

        likes() {
            console.log('爱心');
            this.$emit('onLike', this.list.id)
        },
        calculateLines() {
            const element = this.$refs.textContainer;
            const lineHeight = parseInt(window.getComputedStyle(element).lineHeight, 10);
            const height = element.clientHeight;
            const lines = Math.round(height / lineHeight);
            this.line = lines
        },

        getComment() {
            console.log('click');
            //给父页面传id，父页面需要再自己写 @goComm="goComm"
            this.$emit('goComm', this.list)
        },
        getComment2() {
            console.log('click');
            this.$emit('goComm', this.list.id)
        }
    },
}
</script>
<style lang="scss" scoped>
.text {
    margin-top: 20px;
    display: flex;
    position: relative;
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    line-height: 1.5;

    .indent-part {
        cursor: pointer;
        padding: 0 10px 0 6px;
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: #fff;
        ;
    }
}

.list_box {
    overflow: hidden;
    width: 100%;
    min-height: 128px;
    padding: 0px 10px 15px;
    width: 100%;
    border: 1px solid #C3DCFB;
    display: flex;

    >img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-right: 12px;
        flex-shrink: 0;
        margin-top: 20px;
    }

    .list_t {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        >span {
            font-weight: 400;
            font-size: 18px;
            color: #333333;
        }

        .nameLook {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 400;
            font-size: 16px;
            color: #666666;
            margin-top: 15px;

            p {
                max-width: 300px;

                >span {
                    color: #1169E5;
                    margin-left: 5px;
                }
            }

            >div {
                display: flex;
                align-items: center;

                p {
                    &:last-child {
                        margin-right: 20px;
                    }
                }
            }

            .look,
            .like {
                display: flex;
                align-items: center;
                margin-left: 35px;

                img {
                    width: 18px;
                    height: 14px;
                    margin-right: 8px;
                }

                i {
                    font-size: 18px;
                    margin-right: 8px;
                }
            }
        }
    }
}

.line2 {
    width: 100%;
    /* 设置一个固定宽度，以便文字换行 */
    line-height: 1.5;
    /* 设置行高 */
}

@media screen and (max-width:768px) {
    .list_box {
        width: 100%;
padding: 10px;
        >img {
            width: 70px;
            height: 70px;
            margin-right: 15px;
        }

        .list_t {
            .text {
                font-size: 14px;
            }

            .nameLook {
                font-size: 14px;

                >div {
                    p {
                        &:last-child {
                            margin-right: 10px;
                        }
                    }
                }

                p {
                    max-width: 90px;
                }
            }
        }
    }
}
</style>